<template>
  <div>
    <el-dialog :visible="visible" @close="onClose" :close-on-click-modal="false" fullscreen>
      <!--查询-->
      <div :class="$style.root">
        <el-form :inline="true" :model="formQuery" label-position="right">
          <el-row>
            <el-col :span="5">
              <el-form-item label="商品编码" :label-width="labelWidth">
                <el-input v-model="formQuery.goodsCode" placeholder="请输入" style="width: 90%" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="处理状态" :label-width="labelWidth">
                <el-select clearable v-model="formQuery.status" placeholder="请选择" style="width: 90%" filterable>
                  <el-option label="待处理" value="INIT" />
                  <el-option label="处理成功" value="SUCCESS" />
                  <el-option label="处理失败" value="FAILURE" />
                  <el-option label="处理中" value="PROCESSED" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item label="所属蜂窝" :label-width="labelWidth">
                <el-select clearable v-model="formQuery.cellularCode" placeholder="请选择" style="width: 90%" filterable>
                  <el-option v-for="item in cellulars" :key="item.cellularCode" :label="item.cellularName" :value="item.cellularCode" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品排名" :label-width="labelWidth">
                <el-input-number
                  v-model="formQuery.salesRankStart"
                  controls-position="right"
                  :min="1"
                  :precision="0"
                  :step="1"
                  style="margin-right:4%;width: 43%"
                />
                <el-input-number v-model="formQuery.salesRankEnd" controls-position="right" :min="1" :precision="0" :step="1" style="width: 43%" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button @click="onQuery" type="primary" :loading="querying">查询</el-button>
              <!--
              <el-button @click="reset" type="info">重置</el-button>
              -->
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div style="margin: 0 0 20px 0">
        <el-button type="warning" @click="onOpenImportModal()">导入价格信息</el-button>
        <el-button type="success" @click="exportGoodsPrice" :loading="exporting">导出价格信息</el-button>
      </div>
      <!--列表-->
      <div>
        <el-table
          :data="data"
          :border="true"
          :header-cell-class-name="$style.tableHeaderCell"
          v-loading="loading"
          tooltip-effect="dark"
          style="width: 100%;font-size: 12px;"
          max-height="700"
          ref="goodsTable"
        >
          <el-table-column type="index" align="center" fixed width="60" />
          <el-table-column align="center" min-width="250px" prop="goodsName" label="商品名称" fixed></el-table-column>
          <el-table-column align="center" min-width="70px" prop="costPrice" label="成本价"></el-table-column>
          <el-table-column align="center" min-width="70px" prop="retailPrice" label="零售价"></el-table-column>
          <el-table-column align="center" min-width="100px" prop="profitRate" label="毛利率">
            <template slot-scope="scope">
              {{ scope.row.profitRate }}
            </template>
          </el-table-column>
          <el-table-column align="center" min-width="100px" prop="minPrice" label="起送价"></el-table-column>
          <el-table-column align="center" min-width="100px" prop="channelPrice" label="商品原价"></el-table-column>
          <el-table-column align="center" min-width="100px" prop="activityPrice" label="商品特价"></el-table-column>
          <el-table-column align="center" min-width="100px" prop="salesRank" label="销售排名"></el-table-column>
          <el-table-column align="center" min-width="100px" prop="competeChannelPrice" label="竞对原价最低价"></el-table-column>
          <el-table-column align="center" min-width="100px" prop="competeActivityPrice" label="竞对特价最低价"></el-table-column>
          <el-table-column align="center" min-width="100px" prop="competeMaxSales" label="竞对最高销量"></el-table-column>
          <el-table-column align="center" min-width="100px" prop="cellularSales" label="蜂窝总销量"></el-table-column>
          <el-table-column align="center" min-width="100px" prop="limit" label="限购规则"></el-table-column>
          <el-table-column align="center" min-width="100px" prop="status" label="处理状态">
            <template slot-scope="scope">
              <div style="color: red" v-if="scope.row.status === 'INIT'">
                待处理
              </div>
              <div style="color: #13ce66" v-if="scope.row.status === 'SUCCESS'">
                已处理
              </div>
              <div style="color: red" v-if="scope.row.status === 'FAILURE'">
                处理失败
              </div>
              <div style="color: #13ce66" v-if="scope.row.status === 'PROCESSED'">
                处理中
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" min-width="260px" prop="reason" label="原因"></el-table-column>
          <el-table-column align="center" min-width="100px" label="商品编码">
            <template slot-scope="scope">
              <div style="cursor:pointer;text-decoration:underline" @click="onOpenGoodsDetailModal(scope.row)">
                {{ scope.row.goodsCode }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" min-width="120px" prop="channelCode" label="渠道编码"></el-table-column>
          <el-table-column align="center" min-width="100px" prop="cellularName" label="所属蜂窝"></el-table-column>
        </el-table>
        <div :class="$style.tablePagination">
          <el-pagination
            @size-change="onPageSizeChange"
            @current-change="onPageNumChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100, 200]"
            :page-size="pageSize"
            layout="total, prev, pager, next, sizes"
            :total="total"
          />
        </div>
      </div>
      <!--商品详情-->
      <div>
        <goods-detail-modal
          :visible="goodsDetailVisible"
          :goods="goodsDetail"
          :competeStoreNames="competeStoreNames"
          :modalAppendToBody="false"
          :appendToBody="true"
          @close="onCloseGoodsDetailModal"
        ></goods-detail-modal>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" module>
@import './index.module.scss';
</style>

<script>
import Index from './index';
export default Index;
</script>
